<template>
	<view class="coupon-layout">
		<my-header title="优惠劵"></my-header>
		<my-content class="content">
			<!--      <view class="tab">
        <view
          @click="changeType(item.id)"
          class="tab_item"
          v-for="item in typeArr"
          :key="item.id"
          :class="type == item.id ? 'active' : ''"
        >
          {{ item.title }}
        </view>
      </view>-->
			<my-tab start v-model="type" :tab-list="typeArr"></my-tab>
			<scroll-view class="scroll" refresher-background="" :refresher-triggered="refreshStatus"
				@refresherrefresh="refresh" :refresher-enabled="true" scroll-y="true" @scrolltolower="lower">
				<view class="coupon" v-if="couponData.length > 0 && resultStatus">
					<view class="coupon_item" v-for="item in couponData" :key="item.id">
						<!-- 屎山代码不是我写的哈，我也是二改开发 -->
						<view class="coupon_right">
							<view class="coupon_title">{{ item.name }}</view>
							<view class="coupon_bottom">
								<view class="created_at">有效期至{{ item.expired_at }}</view>
							</view>
							<view class="coupon-info">
								<view class="coupon_remark">{{ item.remark }}</view>
								<view class="coupon_min_amount" v-if="item.min_amount > 0">满{{ item.min_amount }}可用
								</view>
								<view class="coupon_min_amount" v-else>无门槛</view>
							</view>
						</view>
						<view class="coupon_left">
							<!-- <image class="coupon_bg" src="https://www.dingxians.cn/upload/20230909/64fc4443c17d3.png"></image> -->
							<view class="coupon_amount" v-if="item.type == 1">
								<view class="coupon_amount_icon">￥</view>
								<view class="amount-num">{{ item.amount }}</view>
							</view>

							<view class="give_box" @click="give(item)" v-if="is_anchor == 1"></view>
							<view class="use btn-primary" @click="use(item)">立即使用</view>
						</view>
					</view>
				</view>

				<view v-if="couponData.length == 0 && resultStatus" class="coupon none">
					<image mode="widthFix" src="https://www.dingxians.cn/upload/20230830/64ef6428c3b9a.png"
						class="none_image"></image>
					<view class="none_text">暂无优惠券</view>
				</view>
			</scroll-view>

			<view class="bottom" @click="header('/pages/user/couponList')">优惠券历史记录 ></view>
		</my-content>

		<modal v-if="areaShow" title="赠送优惠券" confirm-text="确认赠送" cancel-text="取消" @cancel="cancelAdd"
			@confirm="confirmAdd">
			<input type="number" v-model="numberId" placeholder="请输入受赠人id" class="intxt" maxlength="5" />
		</modal>

		<!-- <view>
			<view class="modal-mask" v-if="isModalVisible"></view>
			<view class="modal-content" v-if="isModalVisible">
				<view class="modal-header">
					<text>输入框</text>
				</view>
				<view class="modal-body">
					<input type="text" placeholder="请输入内容" @blur="hideModal" />
				</view>
				<view class="modal-footer">
					<button @click="hideModal">关闭</button>
				</view>
			</view>
			<button @click="showModal">打开模态框</button>
		</view> -->
	</view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				// isModalVisible: false, // 控制模态框显示隐藏
				areaShow: false,
				numberId: '',
				cocupId:'',
				type: '',
				typeArr: [{
						id: '',
						title: '全部'
					},
					{
						id: 1,
						title: '盲盒券'
					},
					{
						id: 2,
						title: '包邮券'
					},
				],
				page: 1,
				last_page: 1,
				couponData: [],
				resultStatus: false,
				refreshStatus: false,
				is_anchor:''
			}
		},
		onLoad(option) {
			this.getData(1)
		},
		onShow() {
			this.is_anchor = uni.getStorageSync('is_anchor')
		},
		watch: {
			type() {
				this.page = 1
				this.getData(2)
			}
		},
		methods: {
			showModal() {
				this.isModalVisible = true;
			},
			hideModal() {
				this.isModalVisible = false;
			},
			cancelAdd() {
				this.areaShow = false
			},
			confirmAdd() {
				uni.showLoading({
					title: '数据加载中',
				})
				api.userCoupons
					.give({
						give_user_id: this.numberId, //受赠人id
						coupon_id: this.cocupId, //优惠券id
					})
					.then((res) => {
							uni.hideLoading()
							this.show(res.msg)
							this.getData()
							this.areaShow = false
					})
					.catch((error) => {
						console.log(error)
					})
			},
			lower() {
				if (this.page >= this.last_page) {
					this.show('没有更多数据了')
					return
				}
				this.page++
				this.getData(1)
			},
			refresh() {
				this.refreshStatus = true
				this.page = 1
				this.getData(2)
			},
			use(item) {
				if (item.type == 1 && item.blind_box_coupon.length == 1) {
					this.header(`/pages/index/detail?id=${item.blind_box_coupon[0].blind_box_id}`)
				}
			},
			give(item) {
				console.log(item)
				this.cocupId = item.id
				this.areaShow = true

			},
			getData(type) {
				uni.showLoading({
					title: '数据加载中',
				})
				api.userCoupons
					.index({
						page: this.page,
						type: this.type,
						status: 1
					})
					.then((res) => {
						if (res.code === 200) {
							this.resultStatus = true
							this.refreshStatus = false
							uni.hideLoading()
							this.last_page = res.data.last_page
							if (type == 1) {
								this.couponData = this.couponData.concat(res.data.data)
							} else {
								this.couponData = res.data.data
							}
							console.log(this.couponData)
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			changeType(id) {
				if (this.type != id) {
					this.type = id
					this.page = 1
					this.getData(2)
				}
			},
		},
	}
</script>

<style lang="scss">
	.coupon-layout {
		background: url("https://www.dingxians.cn/upload/images/common/bg.png") 100%/100%;
		height: 100vh;
	}

	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	.modal-content {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		width: 80%;
		max-width: 600rpx;
		border-radius: 10rpx;
		z-index: 1001;
		padding: 20rpx;
	}

	.modal-header,
	.modal-footer {
		text-align: center;
		padding: 10rpx;
	}

	.modal-body {
		padding: 20rpx;
	}

	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.modal-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1000;
		}

		.modal-content {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			width: 80%;
			max-width: 600rpx;
			border-radius: 10rpx;
			z-index: 1001;
			padding: 20rpx;
		}

		.modal-header,
		.modal-footer {
			text-align: center;
			padding: 10rpx;
		}

		.modal-body {
			padding: 20rpx;
		}

		.tab {
			display: flex;
			align-items: center;
			width: 100%;
			height: 50rpx;
			margin: 20rpx;
			font-size: 24rpx;

			.tab_item {
				font-size: 30rpx;
				border-radius: 5rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100rpx;
				margin-right: 20rpx;
				padding: 10rpx;
				color: #808080;

				&.active {
					background-image: url('https://www.dingxians.cn/upload/images/box/tab-bg-active.png');
					background-size: 100% 100%;
					color: #ded000;
				}
			}
		}

		.scroll {
			flex: 1;
			margin: 0 auto;
			overflow: hidden;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.coupon {
			display: flex;
			flex-direction: column;
			width: 715rpx;
			margin: 0 auto;
			height: 100%;
			/* height: calc(100vh - 160rpx); */
			// border: 1rpx solid red;

			&.none {
				display: flex;
				justify-content: center;
				align-items: center;

				/* height: calc(100vh - 400rpx); */
				.none_image {
					width: 200rpx;
				}

				.none_text {
					color: #999;
					font-size: 24rpx;
				}
			}

			.coupon_item {
				color: white;
				display: flex;
				margin-bottom: 20rpx;
				height: 200rpx;
				border-radius: 10rpx;
				background-image: url('https://www.dingxians.cn/upload/images/user/bg-coupon-item.png');
				background-size: 100% 100%;
				position: relative;

				/* filter: brightness(0.8) grayscale(1); */
				// overflow: hidden;
				.give_box {
					width: 110rpx;
					height: 46rpx;
					position: absolute;
					background-image: url('https://www.dingxians.cn/upload/20240801/66ab1ef4d666a.png');
					background-size: 100% 100%;
					bottom: 36rpx;
					right: 180rpx;
				}

				.coupon_left {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					// background-color: #A361F6;
					height: 200rpx;
					width: 180rpx;
					/* margin-right: 20rpx; */
					border-top-left-radius: 10rpx;
					border-bottom-left-radius: 10rpx;
					position: relative;
					z-index: 2;

					.coupon_bg {
						position: absolute;
						top: 0;
						left: 0;
						height: 200rpx;
						width: 180rpx;
						border-top-left-radius: 10rpx;
						border-bottom-left-radius: 10rpx;
						z-index: -1;
					}

					.coupon_amount {
						color: #ee5093;
						font-weight: bold;
						display: flex;
						align-items: baseline;

						.coupon_amount_icon {
							font-size: 48rpx;
						}

						.amount-num {
							font-size: 56rpx;
						}
					}

					.use {
						width: 148rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						font-size: 24rpx;
						background-size: 100% 100%;
						margin-right: 10rpx;
						color: #fff;
						font-weight: bold;
					}
				}

				.coupon_right {
					margin-left: 20rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;

					.coupon_title {
						font-family: 'youshe';
						font-size: 32rpx;
						margin-left: 24rpx;
						margin-top: 18rpx;
					}

					.coupon-info {

						display: flex;

						.coupon_remark {
							font-size: 24rpx;
							margin-left: 24rpx;
							margin-bottom: 18rpx;
						}

						.coupon_min_amount {
							font-size: 24rpx;
							margin-left: 10rpx;
						}
					}

					.coupon_bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.created_at {
							font-size: 24rpx;
							padding: 8rpx 24rpx;
							background-size: 100% 100%;
						}
					}
				}
			}
		}

		.bottom {
			color: #999;
			height: 80rpx;
			line-height: 80rpx;
			position: fixed;
			bottom: 0;
			left: calc(50% - 125rpx);
			text-align: center;
			width: 250rpx;
			font-size: 30rpx;
		}
	}
</style>